<template>
  <div style="padding: 20px; background-color: #F5F7FA; min-height: 100vh;">
    <!-- 欢迎卡片 -->
    <el-card shadow="hover" style="margin-bottom: 20px;">
      <div style="font-size: 24px; font-weight: bold;">欢迎回来，{{ user.username }}！</div>
      <div style="margin-top: 10px; font-size: 16px; color: #666;">您已登录为：普通员工</div>
    </el-card>

    <!-- 员工信息卡片 -->
    <el-card shadow="hover" style="width: 300px; float: left; margin-right: 20px;">
      <template #header>
        <div style="font-size: 18px; font-weight: bold;">个人信息</div>
      </template>
      <div style="display: flex; align-items: center;">
        <el-avatar :size="60" style="margin-right: 15px;">
          <el-icon name="user" size="60"><User /></el-icon>
        </el-avatar>
        <div>
          <p><strong>姓名：</strong>{{ user.username }}</p>
          <p><strong>身份：</strong>员工</p>
        </div>
      </div>
    </el-card>

    <!-- 快捷操作入口 -->
    <el-card shadow="hover" style="flex: 1;">
      <template #header>
        <div style="font-size: 18px; font-weight: bold;">快捷操作</div>
      </template>
      <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
        <el-button type="primary" plain @click="goTo('/staff/user')" size="large" style="margin-top: 18px;margin-bottom: 22px">会员管理</el-button>
        <el-button type="success" plain @click="goTo('/staff/equipment')" size="large" style="margin-top: 18px;margin-bottom: 22px">器械管理</el-button>
        <el-button type="warning" plain @click="goTo('/staff/repair')" size="large" style="margin-top: 18px;margin-bottom: 22px">维修记录</el-button>
        <el-button type="info" plain @click="goTo('/staff/user/add')" size="large" style="margin-top: 18px;margin-bottom: 22px">添加新会员</el-button>
        <el-button type="danger" plain @click="goTo('/staff/repair')" size="large" style="margin-top: 18px;margin-bottom: 22px">新增维修记录</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { User } from '@element-plus/icons-vue';

const router = useRouter();

// 当前登录用户信息
const user = ref({
  username: localStorage.getItem('ename')
});

// 统计数据
const stats = ref({
  userCount: 100,
  equipmentCount: 9,
  repairCount: 2,
  newUsersToday: 3
});

// 跳转函数
const goTo = (path) => {
  router.push(path);
};
</script>

<style scoped>
.el-card__body {
  padding: 20px;
}
</style>
